<extend name="Base/common" />
<block name="body">
  <div class="span9 page_message">
  <section id="contents"> <include file="Addons/_nav" />
    <div class="tab-content"> 
      <!-- 表单 -->
       <php> $post_url || $post_url = U('edit?model='.$model['id'], $get_param);</php>
      <form id="form" action="{$post_url}" method="post" class="form-horizontal" style="overflow:hidden">
      	 <div class="fl" style="width:500px;">
            <div class="controls">
                <label class="item-label">
                      卡券标题<span class="check-tips"></span>
                </label>
                <input type="text" name="title" class="text input-large" value="{$data.title}"/>
            </div>
            
            <div class="controls">
                <label class="item-label">
                       卡劵密钥<span class="check-tips">通过微信卡券后台获取</span>
                </label>
                <input type="text" name="appsecre" value="{$data.appsecre}" class="text input-large" />
            </div>
            <div class="controls">
                <label class="item-label">
                       卡券ID<span class="check-tips">通过微信卡券后台获取</span>
                </label>
                <input type="text" name="card_id" value="{$data.card_id}" class="text input-large" />
            </div>
            
            <div class="controls">
                <label class="item-label">
                       商家名称<span class="check-tips"></span>
                </label>
                <input type="text" name="shop_name" class="text input-large" value="{$data.shop_name}"/>
            </div>
            <div class="controls">
                <label class="item-label">
                       商家LOGO<span class="check-tips"></span>
                </label>
                <div class="controls uploadrow2" title="点击修改图片" rel="shop_logo">
                  <input type="file" id="upload_picture_shop_logo">
                  <input type="hidden" name="shop_logo" id="cover_id_shop_logo" value="{$data.shop_logo}"/>
                  <notempty name="data.shop_logo">
                	 <div class="upload-img-box" id="cover_id_shop_logo_img">
                        <img src="{$data.shop_logo|get_cover_url}"  width="100" height="100"/>
                    	<em class="edit_img_icon">&nbsp;</em>
                    </div>
                 <else/>
                	 <div class="upload-img-box" id="cover_id_shop_logo_img" style="display:none">
                     	<img src=""  width="100" height="100"/>
                    	<em class="edit_img_icon">&nbsp;</em>
                    </div>
                 </notempty>
                 
                  
                  
                  <script type="text/javascript">
						//上传图片
						/* 初始化上传插件 */
						$("#upload_picture_shop_logo").uploadify({
							"height"          : 100,
							"swf"             : STATIC+"/uploadify/uploadify.swf",
							"fileObjName"     : "download",
							"buttonText"      : "上传图片",
							"uploader"        : UPLOAD_PICTURE,
							"width"           : 100,
							'removeTimeout'	  : 1,
							'fileTypeExts'	  : '*.jpg; *.png; *.gif;',
							"onUploadSuccess" : uploadPictureshop_logo
						});
						function uploadPictureshop_logo(file, data){
							console.log(data);
							var data = $.parseJSON(data);
							var src = '';
							if(data.status){										
								src = data.url || ROOT + data.path;
								$('#cover_id_shop_logo_img').show().find('img').attr('src',src);
								$('input[name="shop_logo"]').val(data.id);
								$(window.frames["wxIframe"].document).find(".seller img").attr('src',src);
							} else {
								updateAlert(data.info);
								setTimeout(function(){
									$('#top-alert').find('button').click();
									$(that).removeClass('disabled').prop('disabled',false);
								},1500);
							}
						}
					</script> 
                </div>
                
            </div>
            <div class="controls">
                <label class="item-label">
                       卡券图片<span class="check-tips"></span>
                </label>
                <div class="controls uploadrow2" title="点击修改图片" rel="background">
                  <input type="file" id="upload_picture_background">
                  <input type="hidden" name="background" id="cover_id_background" value="{$data.background}"/>
                   
                  <notempty name="data.background">
                	 <div class="upload-img-box" id="cover_id_background_img">
                        <img src="{$data.background|get_cover_url}"  width="100" height="100"/>
                    	<em class="edit_img_icon">&nbsp;</em>
                    </div>
                 <else/>
                	 <div class="upload-img-box" id="cover_id_background_img" style="display:none">
                       <img src=""  width="100" height="100"/>
                    	<em class="edit_img_icon">&nbsp;</em>
                    </div>
                 </notempty>
                  <script type="text/javascript">
						//上传图片
						/* 初始化上传插件 */
						$("#upload_picture_background").uploadify({
							"height"          : 100,
							"swf"             : STATIC+"/uploadify/uploadify.swf",
							"fileObjName"     : "download",
							"buttonText"      : "上传图片",
							"uploader"        : UPLOAD_PICTURE,
							"width"           : 100,
							'removeTimeout'	  : 1,
							'fileTypeExts'	  : '*.jpg; *.png; *.gif;',
							"onUploadSuccess" : uploadPicturebackground
						});
						function uploadPicturebackground(file, data){
							var data = $.parseJSON(data);
							var src = '';
							if(data.status){										
								src = data.url || ROOT + data.path;
								$('#cover_id_background_img').show().find('img').attr('src',src);
								$('input[name="background"]').val(data.id);
								$(window.frames["wxIframe"].document).find(".head_pic").attr('src',src).show();	
								
							} else {
								updateAlert(data.info);
								setTimeout(function(){
									$('#top-alert').find('button').click();
									$(that).removeClass('disabled').prop('disabled',false);
								},1500);
							}
						}
					</script> 
                </div>
            </div>
            <div class="controls">
                <label class="item-label">
                       卡劵头部背景颜色<span class="check-tips"></span>
                </label>
                <div class="colorPicker" style="width:100px; height:100px;background:{$data.head_bg_color}" onClick="simpleColorPicker(this,bgColorChange)">
                		<input name="head_bg_color" value="{$data.head_bg_color}" type="hidden" />
                </div>
            </div>
             <div class="controls">
                <label class="item-label">
                       按钮颜色<span class="check-tips"></span>
                </label>
                <div class="colorPicker" style="width:100px; height:100px;background:{$data.button_color}" onClick="simpleColorPicker(this,buttonColorChange)">
                		<input name="button_color" value="{$data.button_color}" type="hidden" />
                </div>
            </div>
           <div class="controls">
                <label class="item-label">
                       更多按钮<span class="check-tips">格式：按钮名称|按钮跳转地址，每行一个。如：查看官网|http://weiphp.cn</span>
                </label>
                <textarea name="more_button" style="width:405px; height:100px;"><volist name="data[more_button_arr]" id="vo">{$vo}|{$key}&#13;</volist></textarea>
            </div>
            <div class="controls">
                <label class="item-label">
                       卡券详情
                </label>
                <textarea name="content" style="width:405px; height:100px;">{$data.content}</textarea>
                {:hook('adminArticleEdit', array('name'=>'content','value'=>$data[content]))} 
            </div>
            
          
          </div> 
            
        	
    
      
          <div class="fl" style="width:400px; display:none">
                <div class="wx-header"><span>卡券</span></div>
                <!-- 手机端页面 -->
                <div id="container" class="wx-container">
                      <iframe name="wxIframe" frameborder="0" scrolling="no" width="320" height="560" src="{:addons_url('CardVouchers://CardVouchers/package',array('is_edit'=>1))}"></iframe>
               		    <div class="frame_layer"></div>
               </div>
                <!-- 手机端上页面结束 -->
          </div>
      
      </div>
      <div class="form-item form_bh" style="text-align:center">
      	<notempty name="data.id"><input type="hidden" name="id" value="{$data.id}"></notempty>
          <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">提交</button>
      </div>
    </form>
    
    </div>
  </section>
  </div>
</block>
<block name="script">
	
    <link href="__STATIC__/datetimepicker/css/datetimepicker.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
   <php>if(C('COLOR_STYLE')=='blue_color') echo '
   <link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
    ';</php>
  <link href="__STATIC__/datetimepicker/css/dropdown.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.js"></script> 
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js?v={:SITE_VERSION}" charset="UTF-8"></script> 
  <script type="text/javascript">
$('#submit').click(function(){
    $('#form').submit();
});

$(function(){
    $('.time').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        language:"zh-CN",
        minView:0,
        autoclose:true
    });
    $('.date').datetimepicker({
        format: 'yyyy-mm-dd',
        language:"zh-CN",
        minView:2,
        autoclose:true
    });	
    showTab();
	$('.toggle-data').each(function(){
		var data = $(this).attr('toggle-data');
		if(data=='') return true;		
		
	     if($(this).is(":selected") || $(this).is(":checked")){
			 change_event(this)
		 }
	});
	
	$('select').change(function(){
		$('.toggle-data').each(function(){
			var data = $(this).attr('toggle-data');
			if(data=='') return true;		
			
			 if($(this).is(":selected") || $(this).is(":checked")){
				 change_event(this)
			 }
		});
	});
	//填充
	$("iframe").load(function(){
		$(window.frames["wxIframe"].document).find("#title").text($('input[name="title"]').val());
		$(window.frames["wxIframe"].document).find(".name").text($('input[name="shop_name"]').val());
		$(window.frames["wxIframe"].document).find(".use_start_time").text($('input[name="use_start_time"]').val());
		$(window.frames["wxIframe"].document).find(".over_time").text($('input[name="over_time"]').val());
		$(window.frames["wxIframe"].document).find(".start_btn").css('background-color',$('input[name="button_color"]').val());
		$(window.frames["wxIframe"].document).find(".head_hd").css('background-color',$('input[name="head_bg_color"]').val());
		if($('#cover_id_shop_logo_img img').attr('src')!=""){
			$(window.frames["wxIframe"].document).find(".seller img").attr('src',$('#cover_id_shop_logo_img img').attr('src'));	
		}
		if($('#cover_id_background_img img').attr('src')!=""){
			$(window.frames["wxIframe"].document).find(".head_pic").attr('src',$('#cover_id_background_img img').attr('src')).show();	
		}
		$(window.frames["wxIframe"].document).find("#content").html('{$data.content}');
	})
	//编辑页面预览
	$('input[name="title"]').keyup(function(){
		var val = $(this).val();
		$(window.frames["wxIframe"].document).find("#title").text(val);
	})
	$('input[name="shop_name"]').keyup(function(){
		var val = $(this).val();
		$(window.frames["wxIframe"].document).find(".name").text(val);
	})
	$('input[name="use_start_time"]').on('changeDate', function(ev){
		$(window.frames["wxIframe"].document).find(".use_start_time").text($(this).val());
	});
	$('input[name="over_time"]').on('changeDate', function(ev){
		$(window.frames["wxIframe"].document).find(".over_time").text($(this).val());
	});
    
	var domUtils = UE.dom.domUtils;
	imageEditor.addListener('ready',function(){
  		imageEditor.focus(true);
  		domUtils.on(imageEditor.body,"keyup",function(){
			$(window.frames["wxIframe"].document).find("#content").html(UE.getEditor('editor_id_content').getContentTxt());	
        })
  	});
});
function buttonColorChange(color){
	//$(window.frames["wxIframe"].document).find(".start_btn").css('background-color',color);
	
}
function bgColorChange(color){
	//$(window.frames["wxIframe"].document).find(".head_hd").css('background-color',color);
	//$(window.frames["wxIframe"].document).find(".head_pic").hide();	
	$('input[name="background"]').val("");
}
</script> 
</block>
